import cx from 'classnames';
import React from 'react';
import styles from './index.less';
import PointsBg from '@/components/Three/PointsBg';
const ButtonStart = ({}: {}) => {
  const width = 600;
  const height = 250;
  const wHarf = 300; // width/2
  const offset = 10;
  const radio = 50;
  return (
    <svg
      version="1.1"
      viewBox={'0 0 ' + width + ' ' + height + ''}
      height={height}
      width={width}
      style={{
        width: '100%',
        height: '100%',
      }}
    >
      <path
        className={styles.buttonBorder}
        d={
          'M ' +
          wHarf +
          ' ' +
          offset +
          ' L ' +
          (radio + offset) +
          ' ' +
          offset +
          ' Q ' +
          offset +
          ' ' +
          offset +
          ' ' +
          offset +
          ' ' +
          (radio + offset) +
          ' L ' +
          offset +
          ' ' +
          (height - offset - radio) +
          ' Q ' +
          offset +
          ' ' +
          (height - offset) +
          ' ' +
          (offset + radio) +
          ' ' +
          (height - offset) +
          ' L ' +
          (width - offset - radio) +
          ' ' +
          (height - offset) +
          ' Q ' +
          (width - offset) +
          ' ' +
          (height - offset) +
          ' ' +
          (width - offset) +
          ' ' +
          (height - offset - radio) +
          ' L ' +
          (width - offset) +
          ' ' +
          (offset + radio) +
          ' Q ' +
          (width - offset) +
          ' ' +
          offset +
          ' ' +
          (width - offset - radio) +
          ' ' +
          offset +
          'z'
        }
        strokeWidth={5}
        fill={'none'}
      />
      <g className={styles.heartOuter}>
        <path
          className={styles.heart}
          d="M300,184.7c0,0,71.17-48.88,71.17-84.17S324.42,47.58,300,90.52c-24.42-42.94-71.17-25.28-71.17,10.01  S300,184.7,300,184.7z"
          strokeWidth={7}
          fill="none"
        ></path>
      </g>
      <path
        className={styles.start}
        d="M300,99.49c-13.09-7.44-48.07,1.86-48.44,8.93c-0.37,7.07,54.7,17.86,54.33,27.91s-70.03,17.86-71.34,4.09  c-0.15-7.63,6.22-5.95,6.22-5.95 M317.05,109.54c0,0,16,4.84,36.47,0 M327.47,88.33c0,0,2.23,18.42,0,43.53  c-0.44,8.74,1.49,23.81,24.19,14.14 M401.89,106.19c0,0-15.26-9.67-21.58-4.09s-14.88,40.12-11.16,45.73s31.53-24.94,33.95-41.73  c0,0-6.6,38.21-1.58,42.97 M428.86,106.75c0,0,4.09,25.12,2.42,43.63c0,0,3.53-38.6,30.14-42.51 M465.51,110.61  c0,0,12.28,2.27,35.91-1.07 M474.82,88.33c0,0,0.19,31.07,0,45.58c-0.19,14.51,11.16,17.86,23.63,12.84"
        strokeWidth={7}
        fill="none"
      ></path>
    </svg>
  );
};
const Moon = ({}: {}) => {
  return (
    <svg
      version="1.1"
      viewBox={'0 0 600 600'}
      style={{
        width: '100%',
        height: '100%',
      }}
    >
      <path
        className={styles.moon}
        d="M307.33,598C109.57,598,15.95,377.73,75.91,237.83S324.86,19.47,480.03,137.79c0,0-154.19-81.9-265.67,70.33  C136.21,314.81,191.04,500.58,331,513.42c116.36,10.67,205.31-49.16,240.56-141.21C571.56,372.21,542.07,598,307.33,598z"
      />
    </svg>
  );
};
const Plants = ({}: {}) => {
  return (
    <svg
      version="1.1"
      viewBox={'0 0 600 600'}
      style={{
        width: '100%',
        height: '100%',
      }}
    >
      <g>
        <path
          className={cx(styles.pl2, styles.plAn1)}
          id="plAn1"
          d="M319.05,595.5c0,0,100.56,12.25,185.81-96.48c0,0,9.9-12.56,17.02-36.28"
        />
        <path
          className={styles.pl3}
          cus-attr="plLf"
          style={{ transformOrigin: '72% 94%' }}
          d="M432.27,564.11c0,0,49.01-29.93,31.85-64.26"
        />
        <path
          className={styles.pl4}
          cus-attr="plLf"
          style={{ transformOrigin: '77% 89%' }}
          d="M461.88,533.97c0,0,4.81-19.47-6.49-25.47c0,0-6.77,6.14,6.98,17.93   C462.37,526.44,462.58,529.16,461.88,533.97z"
        />
        <path
          className={styles.pl4}
          cus-attr="plLf"
          style={{ transformOrigin: '77.9% 86.9%' }}
          d="M467.36,521.24c0,0,15.42-13.36,15.63-18.84s-7.43-5.09-9.28,12.28C473.71,514.68,473.88,515.76,467.36,521.24   z"
        />
        <path
          className={styles.pl4}
          cus-attr="plLf"
          style={{ transformOrigin: '77.8% 90%' }}
          d="M466.84,539.76c0,0,25.47-1.95,13.88,18.56c0,0-2.2-10.71-0.91-15.77   C479.81,542.55,475.66,539.48,466.84,539.76z"
        />
        <path
          className={styles.pl4}
          cus-attr="plLf"
          style={{ transformOrigin: '77.8% 90%' }}
          d="M467.18,539.39c0,0,8.3-3.33,14.16-0.47s9.49,6.77,20.93,5.23c0,0-3.73-9.87-20.23-5.23   C482.05,538.92,476.67,535.99,467.18,539.39z"
        />
        <path
          className={styles.pl4}
          cus-attr="plLf"
          style={{ transformOrigin: '78% 90%' }}
          d="M467.6,538.94c0,0,8.09-8.67,18.98-11.32c10.88-2.65,19.95-1.88,25.4-1.05c5.44,0.84,12.35,6,17.44,0.42   c0,0-3.06-7.59-20.85-1.31c0,0,8.5-2.92,13.11-2.5c4.6,0.42,9.84-11.54-1.74-10.92c0,0-3.79,7.79-12.35,13.77   c0,0,13.46-9.37,12.97-18.86c0,0-13.74-2.58-13.6,17.93c0,0-0.21,0.45-5.06,0.45C497.05,525.56,481.49,525.07,467.6,538.94z"
        />
        <path
          className={styles.pl4}
          cus-attr="plLf"
          style={{ transformOrigin: '82% 86%' }}
          d="M492.62,514.16c3.54-8.06,2.21-4.33,4.36-11.47c0.01-0.04,1.05-8.27-0.41-14.1   c-7.67-5.16-7.02-11.54-7.01-11.58c0.01-0.04,4.85-1.09,6.73,5.2c1.9,6.34,0.83,20.02,0.84,19.98c2.69-9.1,5.2-22.54,3.13-37.35   c0.76-18.84,10.33-16.88,12.84-15.77c0,0-0.56,11.44-11.79,20.72c0,0-13.67-0.98-16.33-2.65c-2.65-1.67-7.81-12.63-7.33-13.74   c0.49-1.12,19.05-2.09,23.16,12.49c0,0-0.7-16.32,6.49-17.48c0,0-3.63-12.11-13.33-7.5c0,0-10.26-1.6-7.05,12.07   c0,0,14.3,4.33,14.37,17.86C501.37,484.37,499.77,497.55,492.62,514.16z"
        />
        <path
          className={styles.pl4}
          cus-attr="plLf"
          style={{ transformOrigin: '84% 84%' }}
          d="M502.8,501.91c0,0,8.97-7.19,12.73-7.4c3.77-0.21,12.28-1.5,14.83-7.08c0,0-8.06-2.37-15.45,6.94   C514.91,494.38,509.25,496.68,502.8,501.91z"
        />
        <path
          className={styles.pl4}
          cus-attr="plLf"
          style={{ transformOrigin: '86% 81%' }}
          d="M513.02,484.92c0,0,6.07-23.3,1.15-22.05c-4.92,1.26-0.17,7.88,0.98,10.6   C515.15,473.48,514.98,476.48,513.02,484.92z"
        />
      </g>
      <g>
        <path
          className={cx(styles.pl2, styles.plAn2)}
          id="plAn2"
          d="M146.91,526.72c0,0-74.57-61.76-73.99-173.03c1.27-14.65,3.87-15.4,5.73-20.79   c1.86-5.4,13.02-53.95,17.12-75.72c4.09-21.77,32.56-74.42,70.51-104.74"
        />
        <path
          className={styles.pl4}
          cus-attr="plLf2"
          style={{ transformOrigin: '18.60% 80.71%' }}
          d="M111.59,484.25c0,0-13.4-33.4,6.88-73.02s25.49-33.12,18.05-37.77c-7.07-2.05-39.1,21.4-29.27,72.19   c0,0,5.83-15.63,23.32-24.19c17.49-8.56,29.4-26.6,9.37-45.37C139.93,376.09,92.98,431.69,111.59,484.25z"
        />
        <path
          className={styles.pl4}
          cus-attr="plLf2"
          style={{ transformOrigin: '18.53% 80.77%' }}
          d="M111.19,484.64c0,0-22.67-45.7-98.95-33.42c0,0-11.16,26.42,18.6,21.58c29.77-4.84,26.42-2.14,53.12-13.95   c0,0-42.79-38.05-71.44-8C12.52,450.85,82.33,437.69,111.19,484.64z"
        />
        <path
          className={styles.pl4}
          cus-attr="plLf2"
          style={{ transformOrigin: '14.78% 73.49%' }}
          d="M88.7,440.95c0,0-13.86-18.65-21.12-23.95c-3.44-4.65-6.98-14.05-14.7-21.95s-9.95-9.12-18.51-23.26   c0,0-5,17.59,13.4,30.33c18.4,12.74,16.35,11.86,19.65,14.35c0,0-1.98-16.86-14.07-27.93c-12.09-11.07-18.7-16.98-19.47-18.28   c0,0,7.33,15.07,17.93,24.23c4.67,3.91,8.42,9.63,15.95,22.26C67.77,416.74,81.45,430.25,88.7,440.95z"
        />
        <path
          className={styles.pl4}
          cus-attr="plLf2"
          style={{ transformOrigin: '13.82% 70.44%' }}
          d="M82.94,422.62c0,0,0.93-23.86,4.09-33.16c3.16-9.3,9.3-33.3,7.44-50.98c0,0-11.46,6.98-8.93,27.35   c2.53,20.37,2.19,22.56,2.19,22.56s7.95-14.56,13.35-22.93s-3.53-24.56-6.93-27.49c0,0,3.95,13.81-6.77,50.95   C82.87,405.85,83.81,412.96,82.94,422.62z"
        />
        <path
          className={styles.pl4}
          cus-attr="plLf2"
          style={{ transformOrigin: '12.57% 65.21%' }}
          d="M75.4,391.27c0,0-4.37-8.88-18.7-22.28s-13.4-37.58-8.74-38.88c4.65-1.3,10.42,16,10.6,20.09   c0.19,4.09,1.26,15.3-0.84,19.21C57.73,369.41,70.1,381.55,75.4,391.27z"
        />
        <path
          className={styles.pl4}
          cus-attr="plLf2"
          style={{ transformOrigin: '12.18% 58.48%' }}
          d="M73.09,350.9c0,0-22.52-51.3,1.1-83.49c5.02-1.49,7.63,6.33,6.51,17.67c-3.16,9.3-11.3,8.37-16.33,31.02   C64.38,316.11,63.98,327.04,73.09,350.9z"
        />
        <path
          className={styles.pl3}
          cus-attr="plLf2"
          style={{ transformOrigin: '14.65% 49.19%' }}
          d="M87.91,295.13c0,0,21.81-50.23,60.33-44.84"
        />
        <path
          className={styles.pl4}
          cus-attr="plLf2"
          style={{ transformOrigin: '16.98% 45.52%' }}
          d="M101.89,273.11c0,0,29.14-17.23,39-6.26c0.74,5.66-12.51,7.65-25.4,0   C115.49,266.85,111.82,267.69,101.89,273.11z"
        />
        <path
          className={styles.pl4}
          cus-attr="plLf2"
          style={{ transformOrigin: '19.70% 42.91%' }}
          d="M118.19,257.46c0,0,13.26-31.26,17.35-31.44c4.09-0.19,3.21,12.12-11.42,18.88   C124.12,244.9,120.7,251.22,118.19,257.46z"
        />
        <path
          className={styles.pl4}
          cus-attr="plLf2"
          style={{ transformOrigin: '15.73% 44.24%' }}
          d="M94.38,265.41c0,0-8.37-29.91-33.67-6.47c0,0,14.67,2.02,19.93-8.53c0,0,5.6,0.12,10.77,8.02   c0,0,3.26-3.58-12.37-17.72s-13.12-19.07-10.33-18.7c2.79,0.37,13.53,4.84,16.47,24.23C85.17,246.25,90.1,249.32,94.38,265.41z"
        />
        <path
          className={styles.pl4}
          cus-attr="plLf2"
          style={{ transformOrigin: '16.36% 41.23%' }}
          d="M98.19,247.41c0,0,3.81-9.3-3.81-28.74s-2.7-27.26,13.12-40.09c0,0,9.58,13.3-6.6,22.51   c-10.03,5.86-9.42,7.21-9.42,7.21s-6.53-13.58-14.07-20.09c0,0-2.14-10.79,0-10.74c2.14,0.05,10.98,9.3,14,19.58   c0,0,3.16-7.81,10.88-14.51c0,0-4.88-8.23-7.81-8.23s-10.14,9.11-9.83,9.7c0.32,0.58,7.55,9.79,6.15,17.98c0,0-3.4-9.16-5.72-11.67   c0,0,7.05,8,6.16,16.56c0,0,2.12-7.86,7.42-11.44c0,0-5.37,3.4-7.34,12.24c0.65,4.08,2.08,8.62,3.73,12.24   C96.7,223.53,101.12,239.97,98.19,247.41z"
        />
        <path
          className={styles.pl4}
          cus-attr="plLf2"
          style={{ transformOrigin: '20.98% 32.78%' }}
          d="M125.88,196.66c0,0,2.45-13.99,2.08-19.85c0,0-6.14-12.28,1.77-21.58c0,0,5.16,13.23-1.44,21.63   C128.28,176.85,128.18,180.97,125.88,196.66z"
        />
        <path
          className={styles.pl3}
          cus-attr="plLf2"
          style={{ transformOrigin: '18.26% 37.32%' }}
          d="M109.54,223.92c0,0,21.02-26.88,59.35-39.35c0,0,10.98-8.28,14.42-13.16c0,0-10.01,11.2-15.44,13.33   c0,0,10.51,1.84,16.37,6.77"
        />
        <path
          className={styles.pl4}
          cus-attr="plLf2"
          style={{ transformOrigin: '28.01% 31.47%' }}
          d="M192.05,164.81c0,0,20,1.12,19.07,10.23c-0.93,9.12,2.51,6.23,1.77,10.88c-0.74,4.65-10.98,10.14-20.09,9.58   s-24.44-11.56-24.44-11.56L192.05,164.81z"
        />
        <path
          className={styles.pl4}
          cus-attr="plLf2"
          style={{ transformOrigin: '27.77% 30.93%' }}
          d="M166.61,185.57c0,0,16.6-27.19,22.19-27.47c5.58-0.28,14.14,16.56-21.21,27.26c0,0,24.19-5.12,30.33,8.19   c6.14,13.3,6.33,11.16,6.51,12.65c0.19,1.49-10.42,1.77-18.33,0.65C178.19,205.74,173.1,183.36,166.61,185.57z"
        />
        <path
          className={styles.pl4}
          cus-attr="plLf2"
          style={{ transformOrigin: '26.43% 26.50%' }}
          d="M158.6,158.98c2.45-0.94,21.29-10.29,20.87-4.64c-0.42,5.65-8.11-0.72-11.29,0.56S158.6,158.98,158.6,158.98z"
        />
      </g>
    </svg>
  );
};
const Leaf = ({}: {}) => {
  return (
    <svg
      version="1.1"
      viewBox={'0 0 300 300'}
      style={{
        width: '100%',
        height: '100%',
      }}
    >
      <g>
        <path
          className={styles.lf1}
          d="M205.52,123.45c4.09,5.91,18.65,48.71,0,67.8s-46.4-1.84-69.14,35.92c0,0-1.36-27.42-6.37-38.05   c-5-10.63,4.09-45.65,48.67-58.39C201.43,123.45,205.52,123.45,205.52,123.45z"
        />
        <path
          className={styles.lf2}
          d="M204.36,126.73c1.3,10.83,1.92,29.89-10.49,34.44c-8.86,2.77-18.1,4.58-26.11,9.44c-11.44,6.68-18.81,18.49-23.12,30.77    c4.11-12.38,11.39-24.42,22.79-31.32c7.49-4.7,16.22-6.81,24.54-9.41c13.15-3.39,12.17-22.97,10.71-33.65    C202.69,127.01,204.36,126.73,204.36,126.73L204.36,126.73z"
        />
        <path
          className={styles.lf2}
          d="M153.61,183.91c2.13,3.99,2.52,8.51,2.34,12.93c-0.09-1.08-0.21-2.15-0.4-3.21c-0.55-3.03-1.52-6.25-3.32-8.73    C152.23,184.9,153.61,183.91,153.61,183.91L153.61,183.91z"
        />
        <path
          className={styles.lf2}
          d="M149.6,190.86c-2.64-1.35-5.75-2.05-8.73-1.69c3.06-0.95,6.34-0.79,9.41,0.13C150.29,189.3,149.6,190.86,149.6,190.86    L149.6,190.86z"
        />
        <path
          className={styles.lf2}
          d="M156.96,179.03c-2.61-3.06-6.87-4.6-10.86-4.68c-0.6-0.01-1.2,0.02-1.8,0.03c2.41-0.42,4.87-0.46,7.27,0.09    c2.49,0.6,4.76,1.64,6.69,3.45C158.25,177.93,156.96,179.03,156.96,179.03L156.96,179.03z"
        />
        <path
          className={styles.lf2}
          d="M163.65,173.13c2.8,5.78,4.85,12.11,4.78,18.56c-0.22-3.19-1.03-6.28-2.13-9.24c-1.11-2.92-2.49-5.82-4.12-8.46    C162.18,173.98,163.65,173.13,163.65,173.13L163.65,173.13z"
        />
        <path
          className={styles.lf2}
          d="M166.6,170.8c-4.08-6.35-13.75-8.28-20.77-9.33c6.02,0.42,12.22,1.33,17.55,4.34c1.86,1.1,3.62,2.36,4.76,4.28    C168.14,170.09,166.6,170.8,166.6,170.8L166.6,170.8z"
        />
        <path
          className={styles.lf2}
          d="M175.17,166.37c3.43,6.93,4.06,14.88,4.29,22.49c0,0-0.29-2.83-0.29-2.83c-0.59-4.64-1.49-9.38-3.09-13.77    c-0.63-1.68-1.38-3.49-2.33-4.96C173.74,167.3,175.17,166.37,175.17,166.37L175.17,166.37z"
        />
        <path
          className={styles.lf2}
          d="M188.72,162.06c2.55,7.66,2.88,15.7,3.08,23.69c-0.34-3.94-0.8-7.87-1.52-11.75c-0.71-3.77-1.59-7.76-3.11-11.23    C187.17,162.77,188.72,162.06,188.72,162.06L188.72,162.06z"
        />
        <path
          className={styles.lf2}
          d="M180.59,164.74c-3.02-5.81-6.88-12.15-13.22-14.71c1.65,0.44,3.19,1.26,4.61,2.24c4.22,3.05,7.43,7.26,10.12,11.69    C182.1,163.96,180.59,164.74,180.59,164.74L180.59,164.74z"
        />
        <path
          className={styles.lf2}
          d="M192.92,160.77c-0.86-5.77-2.75-11.81-6.97-16.04c1.16,0.95,2.21,2.05,3.14,3.26c2.72,3.72,4.46,8.03,5.52,12.51    C194.6,160.5,192.92,160.77,192.92,160.77L192.92,160.77z"
        />
      </g>
      <g>
        <path
          className={styles.lf1}
          d="M168.43,114.31c0,0-3.7,21.15-36.35,25.23s-18.3-6.03-46.88,0c0,0,11.86-65.13,83.23-40.02V114.31z"
        />
        <path
          className={styles.lf2}
          d="M165.32,110.9c-7.58-2.76-16.16-1.98-23.98-0.65c-0.73,0.16-4.35,0.97-5,1.11c-0.64,0.18-2.3,0.66-2.96,0.85    c-10.42,2.94-20.61,7.94-30.04,13.26c4.23-2.54,10.1-5.8,14.45-7.95c12.41-5.8,26.01-10.54,39.89-9.77    c2.8,0.22,5.67,0.56,8.35,1.59C166.03,109.35,165.32,110.9,165.32,110.9L165.32,110.9z"
        />
        <polygon
          className={styles.lf2}
          points="109.31,122.53 108.46,130.08 107.61,122.53 109.31,122.53   "
        />
        <polygon
          className={styles.lf2}
          points="109.77,122.49 102.15,119.26 110.27,120.86 109.77,122.49   "
        />
        <path
          className={styles.lf2}
          d="M117.42,118.2c0.14,3.98,0.73,8.64-1.25,12.23c1.43-3.74,0.23-8.15-0.43-11.96C115.74,118.46,117.42,118.2,117.42,118.2    L117.42,118.2z"
        />
        <path
          className={styles.lf2}
          d="M118.93,117.36c-1.23-2.29-3.33-4.37-5.96-4.94c2.94,0.05,5.55,1.81,7.4,4.03C120.37,116.45,118.93,117.36,118.93,117.36    L118.93,117.36z"
        />
        <path
          className={styles.lf2}
          d="M127.66,113.81c0.27,4.58,0.61,9.45-1.22,13.75c0.38-1.09,0.51-2.23,0.58-3.36c0.15-3.39-0.36-6.83-1.03-10.12    C125.98,114.08,127.66,113.81,127.66,113.81L127.66,113.81z"
        />
        <path
          className={styles.lf2}
          d="M129.92,112.73c-1.09-4.06-5.6-6.01-9.41-6.78c0,0-1.82-0.29-1.82-0.29s1.85,0.08,1.85,0.08    c3.12,0.28,6.34,1.11,8.75,3.26c1.03,0.97,1.83,1.95,2.3,3.37C131.59,112.37,129.92,112.73,129.92,112.73L129.92,112.73z"
        />
        <path
          className={styles.lf2}
          d="M136.7,110.63c1.84,5.97,0.16,12.35-2.19,17.91c1.36-4.2,2.2-8.72,1.68-13.13c-0.18-1.41-0.5-2.92-1.03-4.07L136.7,110.63    L136.7,110.63z"
        />
        <path
          className={styles.lf2}
          d="M141.9,109.43c-1.42-3.75-3.91-7.31-7.4-9.42c2.92,1.25,5.34,3.48,7.23,6.02c0.64,0.87,1.21,1.74,1.74,2.75L141.9,109.43    L141.9,109.43z"
        />
        <path
          className={styles.lf2}
          d="M148.61,108.6c0.19,6.34,0.3,12.97-2.01,18.96c0.96-3.03,1.08-6.23,1.06-9.38c-0.04-3.14-0.31-6.31-0.74-9.4    C146.92,108.79,148.61,108.6,148.61,108.6L148.61,108.6z"
        />
      </g>
    </svg>
  );
};
const Flower1 = ({}: {}) => {
  return (
    <svg
      version="1.1"
      viewBox={'0 0 300 300'}
      style={{
        width: '100%',
        height: '100%',
      }}
    >
      <path
        className={styles.lf1}
        d="M197.08,100.39c4.84-12.84,3.35-31.63,44.47-37.95c0,0,0,28.28-9.3,37.95s-29.16,11.07-29.16,11.07   s12.6-9.3,16.23-18.51c0,0-7.83,11.56-14.98,16.37C195.78,115.09,197.08,100.39,197.08,100.39z"
      />
      <path
        className={styles.flw1_a}
        d="M155.97,138.06c0,0-1.67-6.6,7.63-19.81c9.3-13.21,24.74-23.38,34.6-26.76s23.07-4.54,13.02,11.2   s-38.33,35.37-50.98,37.46c0,0,19.91-5.44,43.91-27.68c9.86-8.65,34.98-6.7,36.09-5.21s4.74,8.93-8.74,15.26   c-13.49,6.33-33.58,8.74-41.49,11.53s-27.91,10.33-27.91,10.33s38.23-16.74,60.46-16.74s26.88,5.4,11.81,14.42   c-15.07,9.02-22.6,6.14-39.72,4.65s-32.84,3.35-32.84,3.35s21.3-7.91,54.05,0c24.56,6.6,26.7,15.16,14.98,18.7   c-11.72,3.53-25.67,6.14-37.86,1.21c-12.19-4.93-16-10.79-32.56-14.33c0,0,34.05,8.47,52,26.79c17.95,18.33,21.67,28.28,5.86,25.77   c-15.81-2.51-21.49-7.16-32.93-22.14c-11.44-14.98-22.98-23.53-26.88-27.81c0,0,31.44,26.98,38.05,45.3   c6.6,18.33,3.44,29.67-12.93,13.02c-13.4-14.51-20.37-27.07-22.6-32.93c0,0-1.86-15.91-6.7-21.4c0,0,12.65,16.19,5.49,66.05   c0,0-3.26,14.23-11.07,7.44c0,0-1.58-1.02-3.07-15.53s-3.91-36.65,4.37-59.63c0,0-4.09,17.21-7.07,34.7s-20.09,26.14-22.33,25.77   c-2.23-0.37-8.18-30.45,10.33-44.65s10.23-20.37,10.23-20.37s3.63,9.58-8.37,18.05s-13.83,13.99-40.47,14.14   s2.98-18.42,19.53-23.63s24.19-11.16,26.42-15.07c0,0-14.62,21.4-57.45,9.12c-27.25-7.81-5.99-15.63,2.75-16s24.93-7.26,53.58,0.93   c0,0-37.02-10.49-49.45-10.32s-25.71-8.66-3.38-12.93s26.98,0.86,37.21,6.85c10.23,5.99,22.14,12.5,22.14,12.5   s-24.37-12.49-42.79-26.52c-10.51-19.06,2.98-17.57,15.63-12.73s18.05,15.67,20.84,21.98c2.79,6.3,8.93,17.28,8.93,17.28   s-14.51-18.15-10.23-46.29c2.6-14.74,15.26-11.39,19.91,5.73s-4.55,39.43-4.55,39.43s9.02-27.89,4.93-42.78   c0,0,13.02-28.28,20.65-29.77c3.16,0,2.42,5.02,2.42,5.02s12.65-8.26-0.93,30.38C178.48,101.38,159.5,115.82,155.97,138.06z"
      />
      <g>
        <path
          className={styles.flw1_b}
          d="M155.22,143.18c2.43-11.86,12.74-21.69,23.81-25.86c-1.1,1.07-2.28,1.98-3.4,2.96     C167.81,126.96,160.61,134.33,155.22,143.18L155.22,143.18z"
        />
        <path
          className={styles.flw1_b}
          d="M155.22,155.18c9.87-4.99,22.6-4.51,32.56,0c-1.42,0.02-2.78-0.14-4.15-0.19C174.08,154.35,164.86,154.26,155.22,155.18     L155.22,155.18z"
        />
        <path
          className={styles.flw1_b}
          d="M153.92,156.95c5.79-1.18,11.57,2,16.27,5.06c2.81,2.01,5.42,4.3,7.55,7.03c-1.09-0.44-2.1-0.97-3.11-1.49     C167.69,164.06,161.39,159.27,153.92,156.95L153.92,156.95z"
        />
        <path
          className={styles.flw1_b}
          d="M149.27,156.94c5.47,9.99,6.51,22.9,4.09,33.93c-0.79-4.82-1.38-12.09-1.95-17     C150.95,169.64,149.87,161.15,149.27,156.94L149.27,156.94z"
        />
        <path
          className={styles.flw1_b}
          d="M147.97,159c-2.19,5.51-4.22,10.71-7.26,15.81C139.86,168.84,142.65,162.06,147.97,159L147.97,159z"
        />
        <path
          className={styles.flw1_b}
          d="M142.94,151.78c-1.34,6.79-7.14,14.66-14.51,15.13C134.25,162.54,137.79,156.96,142.94,151.78L142.94,151.78z"
        />
        <path
          className={styles.flw1_b}
          d="M140.71,145.6c-4.03,5.12-14.68,5.92-20.65,4.47C126.73,147.4,133.89,147.5,140.71,145.6L140.71,145.6z"
        />
        <path
          className={styles.flw1_b}
          d="M151.37,139.65c-6.73-6.54-8.98-17.5-5.64-26.23C146.45,122.5,148.16,131.1,151.37,139.65L151.37,139.65z"
        />
      </g>
      <ellipse
        className={styles.flw1_b}
        transform="matrix(0.967 -0.2546 0.2546 0.967 -32.9329 43.2985)"
        cx="150.79"
        cy="148.86"
        rx="13.96"
        ry="15.9"
      />
    </svg>
  );
};
const Flower2 = ({}: {}) => {
  return (
    <svg
      version="1.1"
      viewBox={'0 0 300 300'}
      style={{
        width: '100%',
        height: '100%',
      }}
    >
      <path
        className={styles.flw2_a}
        d="M141.16,144.52c0,0-43.45-26.98-26.34-48c14.88-12.94,20.28-6.7,23.81-2.79c3.53,3.91,13.77,35.4,14.14,43.93   c0,0,12.47-34.26,21.77-34.26s8,7.41,9.49,8.36c1.49,0.94,7.46-0.53,8.56,4.11s-5.02,19.03-8.93,21.79s-26.6,8.53-26.6,8.53   l37.77,6.49c0,0,7.26-0.17,6.88,7.83c-0.37,8-3.63,9.13-3.86,10.8c-0.23,1.67,4.23,10.08,1.44,13.13   c-2.79,3.05-12.28,7.93-22.7-2.88c-10.42-10.81-3.16,33.28-15.44,35.7c-12.28,2.42-6.14-0.63-8.56-1.34   c-2.42-0.71-6.33,0.41-7.81-2.01c-1.49-2.42-2.6-44.35,7.63-58.27c0,0-33.3,22.82-38.51,24.17c-5.21,1.35-19.72,5.82-10.05-19.3   c8.56-15.26,31.63-11.72,31.63-11.72L141.16,144.52z"
      />
      <path
        className={styles.flw2_a}
        d="M142.54,151.77c0,0-16.56,1.61-23.63,5.74c-7.07,4.12-20.65-1.83-19.35-16.34s1.67-24.93,14.33-20.65   s8.56,7.14,16.19,9.62c7.63,2.48,15.26,12.15,15.26,12.15l5.4-6.14c0,0-15.98-24-9.57-40.37s12.55-7.63,17.01-7.54   c4.47,0.1,8.99-0.22,10.6,2.75s-4.47,32.56-12.09,44.16c-7.63,11.61,5.74,8.56,5.74,8.56s16.63-2.45,22.37-9.75   c5.74-7.3,8.53-14.55,15.79-10.83s14.82,20.51,9.37,26.53c-5.46,6.03-27.67,12.23-34.67,7.86c-7-4.38-17.49-4.83-17.49-4.83   s7.44,12.18,13.4,17.54c5.95,5.36,20.65,8.57,18.79,19.43c-1.86,10.86-10.6,9.38-15.07,11.24s-19.37-6.06-19.27-39.4l-8.45-3.02   c0,0-3.16,37.94-32.37,36.36c0,0-0.37-5.25-3.16-5.18c-2.79,0.07-6.14,2.33-6.7-1.87c-0.56-4.2-1.67-13.87,7.63-18.89   s32.37-14.88,32.37-14.88L142.54,151.77z"
      />
      <g>
        <path
          className={styles.flw2_b}
          d="M145.89,145.26c-6.16-1.45-11.51-4.41-16.93-7.6C135.19,136.97,141.94,140.57,145.89,145.26L145.89,145.26z"
        />
        <path
          className={styles.flw2_b}
          d="M124.31,133.73c-5.47-1.2-22.7-6.15-23.99,2.08c-0.38,2.31-0.26,4.71,1.38,6.44c2.68,2.65,6.66,3.42,10.34,4.31    c5.23,1.1,10.63,1.82,15.98,2.84c-8.24-0.03-28.62,1.11-30.54-9.51C95.32,123.54,115.75,129.2,124.31,133.73L124.31,133.73z"
        />
        <path
          className={styles.flw2_b}
          d="M125.42,170.22c7.12-3.88,13.69-8.82,18.48-15.36c0,0,4.02-5.42,4.02-5.42l-1.7,6.55c-3.89,13.86-14.84,29.01-30.66,28.46    c10.92-1.65,19.04-9.96,23.95-19.38c1.67-3.12,3.12-6.45,4.18-9.76l2.32,1.13C140.79,163,133.42,167.79,125.42,170.22    L125.42,170.22z"
        />
        <path
          className={styles.flw2_b}
          d="M117.24,106.38c-1.61-3.75-3.28-12.83,1.66-14.72c4.19-0.97,7.6,4.31,9.13,7.47c-2.55-1.65-4.78-3.95-7.52-4.83    c-0.33-0.03-0.62-0.08-0.76,0.02c-0.22,0.07-0.35,0.22-0.5,0.44C117.51,98.19,117.92,102.52,117.24,106.38L117.24,106.38z"
        />
        <path
          className={styles.flw2_b}
          d="M148.31,202.2c-0.86-12.34-0.98-37.31,7.77-46.62c0,0,2.74-2.72,2.74-2.72l-0.35,3.88c-1.31,15.8-1.88,31.7-1.41,47.56    c-0.72-3.92-1.21-7.9-1.57-11.88c-0.98-11.97-0.81-23.98,0.16-35.95c0,0,2.39,1.16,2.39,1.16    C150.41,165.83,149.36,190.71,148.31,202.2L148.31,202.2z"
        />
        <path
          className={styles.flw2_b}
          d="M178.08,180.46c3.19,3.35,12.68,18.44,4.12,19.98c-5.74,1.14-10.52-3.55-10.63-9.15c2,4.52,5.75,7.77,10.6,6.35    C184.79,196.34,178.8,183.28,178.08,180.46L178.08,180.46z"
        />
        <path
          className={styles.flw2_b}
          d="M120.77,110.84c9.21,10.99,19.56,21.02,31.14,29.48c0,0-2.11,0.61-2.11,0.61l2.54-6.16c0,0-0.03,0.92-0.03,0.92    c-2.7-9.84-5.46-20.19-4-30.44c0.34,10.31,3.64,20.3,6.72,30.06c0,0-0.19,0.47-0.19,0.47l-2.45,6.19l-0.65,1.66l-1.46-1.04    C138.51,134.08,128.15,123.39,120.77,110.84L120.77,110.84z"
        />
        <path
          className={styles.flw2_b}
          d="M173.05,119.4c-5.23,8.59-11,17.17-12.83,27.15c0,0-0.92-1.47-0.92-1.47c6.3,1.97,13.16,2.35,19.7,1.29    c-6.74,3.07-14.59,3.14-21.64,0.98C158.62,136.42,165.25,126.82,173.05,119.4L173.05,119.4z"
        />
        <path
          className={styles.flw2_b}
          d="M181.61,166.29c-9.78-1.71-22.07-8.05-25.96-17.67C163.21,156.13,172.75,160.53,181.61,166.29L181.61,166.29z"
        />
      </g>
      <path
        className={styles.flw2_c}
        d="M138.82,159.59c-0.92-6.28-2.79-8.56-2.42-13.02c0.37-4.47,2.25-0.56,4.76-5.02c2.5-4.47-1.03-7.44,0.83-8.93   c1.86-1.49,4.28,0.93,7.44,0c3.16-0.93,1.86-3.53,4.84-3.53s2.98-0.49,4.47,1.06c1.49,1.55,0,6.06,2.05,7.53s5.02-0.54,6.7,1.76   c1.67,2.3-2.23,5.28-2.42,8.26c-0.19,2.98,3.81,4.58,2.83,7.96c-0.97,3.39-2.32,6.73-5.46,6.73s-4.26-2.34-6.12-0.89   c-1.86,1.45,0.35,8.03-4.1,8.28c-4.46,0.24-3.53-4.04-5.39-5.53S139.81,166.4,138.82,159.59z"
      />
    </svg>
  );
};
const Flower3 = ({}: {}) => {
  return (
    <svg
      version="1.1"
      viewBox={'0 0 300 300'}
      style={{
        width: '100%',
        height: '100%',
      }}
    >
      <path
        className={styles.lf1}
        d="M126.11,123.71c0,0-9.77-26.79,7.26-34.05c17.02-7.26,22.23-11.72,24.65-13.67c0,0-4.57,11.02-1.98,19.26  c2.59,8.23,3.01,29.71-16.25,41.44c0,0-6.84-23.72,0.14-39.63c0,0-9.63,15.21-3.49,36C136.43,133.06,129.32,130.69,126.11,123.71z"
      />
      <path
        className={styles.flw3_a}
        d="M188.81,113.11c0,0,15.91-6.14,18.6-2.05c2.7,4.09,5.12,4.56,0,10.23s-17.49,13.12-17.49,13.12   s38.14-9.68,31.07,17.16c-3.08,1.44-31.16-17.44-33.77-13.25s-5.49-21.3-5.49-21.3L188.81,113.11z"
      />
      <path
        className={styles.flw3_a}
        d="M184.99,174.69c0,0,18.98,10.42,10.6,26.05c-7.81,1.67-10.79-14.51-17.3-21.95c-6.51-7.44-1.86,0-1.86,0   s5.77,9.3,2.6,14.88s-6.51,13.95-10.23-11.91c-3.72-25.86-9.7,0-9.7,0s-1.09,16.19,6.54,20.47c7.63,4.28-13.12,15.95-17.07-9.86   s-1.91,12.97-1.91,12.97s-11.35,12.71-12.28-1.8c-0.93-14.51,15.44-35.16,15.44-35.16l24.19-4.93L184.99,174.69z"
      />
      <path
        className={styles.flw3_a}
        d="M144.06,149.39c0,0-29.58-27.72-29.58-33.86c0-6.14,3.7-3.37,8.37-7.63c4.68-4.25,29.58,26.79,30.14,41.49   c0,0-2.9-16.38-13.57-27.91c0,0-6.15-12.64,11.71-8.74c0,0-2.6,16,5.3,34.88c0,0-17.4-51.26,11.91-41.67c0,0-8.47,12.74-8.84,41.49   c0,0,2.51-67.63,31.91-44.37c0,0-12,6.7-17.21,21.95s-12.28,26.05-12.28,26.05s5.58-9.3,12.28-26.05s23.44-31.1,33.39-21.13   c0,0,2.35,5.13-2.78,5.13s-8.66,0-19.45,17.3c0,0-11.16,11.72-18.79,24.74c0,0,22.14-38.51,42.6-32.56c0,0,5.77-0.77,5.02,6.12   c0,0,6.33,4.67-8.56,6.9c-9.14,1.86-14.33,6.7-14.33,6.7s-8.74-0.56-24.56,17.49c0,0,26.86-34.18,48.78-7.32   c0,0,2.76,5.09-3.57,4.91c-6.33-0.19-20.65-6.51-45.58,8.37c0,0,33.67-17.67,50.98,9.12c3.35,10.6-9.67,24.56-13.58,14.33   s-7.81-20.28-18.23-22.33c-10.42-2.05-23.07-0.93-23.07-0.93s42.56-4.89,37,21.55c-4.07,6.54-16.54,8.84-19.89,5.27   s-8.19-22.36-18.05-23.66c0,0,16.74,7.52,9.86,25.34c-5.22,5.92-4.09,7.03-7.63,4.61s-15.26-11.72-10.79-24.37   c0,0-1.49,11.53-0.19,20.84s5.21,17.9,2.98,18.91c-2.23,1-14.51,1.19-13.58-11.84c0.93-13.02,9.49-24.56,11.91-32.74   c0,0-16.74,28.47-15.44,37.02s-0.93,12.28-5.4,8.74s-17.49-19.16,15.63-41.12c0,0-28.84,16.56-24.74,40.74   c0,0-21.95-4.65-7.07-25.86c13.21-14.7,32.74-16.93,32.74-16.93s-35.39,5.58-41.32,31.44c-3.88,2.79-10.95-13.95,2.44-25.49   c13.4-11.53,37.95-3.91,37.95-3.91s-36.09-14.33-55.07,17.12c0,0-9.86-17.67,3.72-24.93s31.81-2.42,45.21-0.37   c0,0-45.95-12.47-55.44,0.37c0,0-4.52-34.35,53.58-5.77c0,0-38.14-20.28-46.7-12.65c0,0,2.98-16.35,17.49-14.51   C126.19,131.51,144.06,149.39,144.06,149.39z"
      />
      <g>
        <ellipse
          className={styles.flw3_b}
          transform="matrix(0.866 -0.5 0.5 0.866 -58.2758 98.0003)"
          cx="153.73"
          cy="157.74"
          rx="18.97"
          ry="14.29"
        />
        <circle className={styles.flw3_c} cx="154.56" cy="158.77" r="3.45" />
        <ellipse
          className={styles.flw3_c}
          cx="159.1"
          cy="152.57"
          rx="3.07"
          ry="2.75"
        />
        <circle className={styles.flw3_c} cx="151.32" cy="151.57" r="2.75" />
        <circle className={styles.flw3_c} cx="146.67" cy="157.13" r="2.75" />
        <circle className={styles.flw3_c} cx="154.39" cy="166.18" r="2.75" />
        <circle className={styles.flw3_c} cx="146.67" cy="164.72" r="2.75" />
        <circle className={styles.flw3_c} cx="161.85" cy="159.77" r="2.75" />
      </g>
    </svg>
  );
};
const Flower4 = ({}: {}) => {
  return (
    <svg
      version="1.1"
      viewBox={'0 0 300 300'}
      style={{
        width: '100%',
        height: '100%',
      }}
    >
      <path
        className={styles.lf1}
        d="M179.97,65.89c-1.74-8.28,3.28-18.98,9.42-23.44c6.14-4.47,7.26-6.33,7.63-14.14c0,0,1.99,10.42,7.51,16.37   c5.51,5.95,12.56,16.71,5.13,28.82c-7.43,12.11-26.78,11.74-26.78,11.74s14-8.93,15.82-24.42c0,0,1.43,10.09-13.43,20.88   C179.97,76.96,181.72,74.17,179.97,65.89z"
      />
      <path
        className={styles.lf1}
        d="M174.21,216.96c0,0,33.05-3.35,33.42,49.12c0,0-6.33-6.14-19.91-8.37c-15.59-2.56-19.72-28.23-19.72-37.4   c0-10.98,15.58,8.4,26.78,26.61C194.77,246.91,192.37,235.56,174.21,216.96z"
      />
      <path
        className={styles.lf1}
        d="M162.6,211.75c-0.54-8.14-23.63,16.33-23.63,29.75s-5.71,15.84-7.6,17.32c0,0,45.78,6.13,33.97-45.21   c0,0-3.31,20.42-10.75,27.89C154.6,241.49,163.53,225.89,162.6,211.75z"
      />
      <path
        d="M145.67,120.21c0,0-13.4-27.91-17.12-35.72c-3.72-7.81-4.47-28.65,8.56-32.37   c13.02-3.72,18.23,14.88,17.86,19.35s2.6,43.68,4.09,50.49c0,0-6.33-42.87-3.91-56.63c2.42-13.77,18.23-12.84,22.7-11.35   s12.47,12.28,9.12,21.58c0,0-13.4,13.77-20.28,48.74c0,0,10.42-53.21,31.81-54.14c21.4-0.93,22.46,29.21,6.02,41.12   s-34.86,21.77-34.86,21.77s26.23-19.53,47.26-20.84c21.02-1.3,25.67,9.12,23.07,18.42s-19.35,19.16-66.05,12.84   c0,0,49.67,0.93,58.79,12.65c9.12,11.72,2.79,29.95-16.74,25.3c-19.53-4.65-46.14-33.3-46.14-33.3s21.95,22.51,43.53,34.05   c9.3,5.4,10.98,35.35-16.37,24.93c-13.6-6.33-30.33-52.84-30.33-52.84s19.16,37.02,20.09,50.6s-4.09,30.51-22.88,20.09   c-15.44-8.74-10.42-64.74-10.42-64.74s1.86,50.05-9.67,63.63s-29.77,7.44-27.72-9.86s12.65-24.56,18.79-36.47   c6.14-11.91,9.49-19.72,9.49-19.72s-16.32,38.88-32.56,48.74s-22.88-0.93-22.7-12.09c0.19-11.16,9.3-21.21,19.91-25.67   s22.9-9.3,28.75-14.51c0,0-22.8,18.6-53.31,17.3c-21.02-0.56-27.16-21.4-9.3-28.65s41.3-7.26,58.05-5.4c0,0-44.47-0.37-54.7-11.16   s-13.58-26.23,6.88-28.47c10.18-0.93,16.74,5.4,21.77,10.23c5.02,4.84,25.3,18.79,31.63,21.77c0,0-39.81-22.33-47.26-38.51   s13.47-28.27,24.19-21.77C126.43,76.11,130.6,88.21,145.67,120.21z"
        className={styles.flw4_a}
      />
      <g>
        <circle className={styles.flw4_b} cx="153.53" cy="142.25" r="23.9" />
        <circle fill={'#fff'} cx="152.57" cy="131.16" r="2.81" />
        <circle fill={'#fff'} cx="167.89" cy="131.78" r="2.19" />
        <circle fill={'#fff'} cx="157.57" cy="124.78" r="2.19" />
        <circle fill={'#fff'} cx="135" cy="144.39" r="2.46" />
        <circle fill={'#fff'} cx="145.14" cy="126.98" r="2.1" />
        <circle fill={'#fff'} cx="141.74" cy="157.32" r="2.1" />
        <circle fill={'#fff'} cx="137.18" cy="135.41" r="1.27" />
        <circle fill={'#fff'} cx="144.61" cy="133.66" r="1.27" />
        <circle fill={'#fff'} cx="142.83" cy="141.63" r="1.27" />
        <circle fill={'#fff'} cx="138.74" cy="151.22" r="1.27" />
        <circle fill={'#fff'} cx="163.79" cy="126.61" r="1.27" />
      </g>
      <g>
        <path
          className={styles.flw4_c}
          d="M167.44,128.44c2.71-8.26,11.24-21.85,20.28-23.67c-4.32,3.05-7.15,7.35-10.42,11.39     C174.09,120.31,171.01,124.51,167.44,128.44L167.44,128.44z"
        />
        <path
          className={styles.flw4_c}
          d="M169.86,139.56c9.95-7.12,25.1-12.37,37.21-8.76C194.07,131.33,182.25,135.82,169.86,139.56L169.86,139.56z"
        />
        <path
          className={styles.flw4_c}
          d="M168.5,146.41c11.13-0.09,26.14,3.69,33.54,12.5C191.45,152.97,179.9,150.52,168.5,146.41L168.5,146.41z"
        />
        <path
          className={styles.flw4_c}
          d="M164.53,152.66c11.66,4.29,21.5,14.73,24.86,26.71C182.42,169.21,174.13,160.4,164.53,152.66L164.53,152.66z"
        />
        <path
          className={styles.flw4_c}
          d="M159.17,157.78c7.95,8.61,13.57,21.48,12.36,33.32C168.68,179.45,163.88,168.76,159.17,157.78L159.17,157.78z"
        />
        <path
          className={styles.flw4_c}
          d="M149.21,157.78c0.96,10.24-1.24,26-9.05,33.32C144.91,180.67,145.99,168.71,149.21,157.78L149.21,157.78z"
        />
        <path
          className={styles.flw4_c}
          d="M142.42,152.66c-2.22,9.68-9.61,20.75-19.81,22.99C131.05,169.6,136.35,160.89,142.42,152.66L142.42,152.66z"
        />
        <path
          className={styles.flw4_c}
          d="M137.18,144.77c-8.92,6.24-21.37,8.85-31.88,5.59C116,149.63,126.77,147.35,137.18,144.77L137.18,144.77z"
        />
        <path
          className={styles.flw4_c}
          d="M140.01,134.13c-10.16-0.26-25.95-4.53-31.73-13.49c2.37,1.78,4.92,3.01,7.51,4.2     C123.4,128.24,132.3,130.9,140.01,134.13L140.01,134.13z"
        />
        <path
          className={styles.flw4_c}
          d="M142.83,126.43c-9.37-5.26-20.67-16.36-21.42-27.61C126.51,109.53,135.39,117.38,142.83,126.43L142.83,126.43z"
        />
        <path
          className={styles.flw4_c}
          d="M153.53,125.34c-5.56-9.4-10.5-24.19-8.07-35.08C147.14,102.03,151.39,113.65,153.53,125.34L153.53,125.34z"
        />
        <path
          className={styles.flw4_c}
          d="M161.66,126.98c-1.56-9.92-0.71-23.86,4.86-32.44C164.52,105.2,164.09,116.4,161.66,126.98L161.66,126.98z"
        />
      </g>
    </svg>
  );
};
const LoveTxt = ({}: {}) => {
  return (
    <svg
      version="1.1"
      viewBox={'0 0 260 70'}
      style={{
        width: '100%',
        height: '100%',
      }}
    >
      <g>
        <path
          className={styles.lvt}
          cus-attr="lvTxt"
          d="M11.6,13.5c0,0,1.2,11.1,0,21c-0.4,3.4-0.7,11.4,0.2,11.8c2,0.9,7.6-3.5,9.4-5.9"
        />
        <path
          className={styles.lvt}
          cus-attr="lvTxt"
          d="M33.2,27.3C30,26.6,23,42.5,27.9,46.3C32.7,50,44,40,41.2,31c-2.8-9-11.1-6.9-9.1-3.2"
        />
        <path
          className={styles.lvt}
          cus-attr="lvTxt"
          d="M45.8,25.8c0.6,0.5,5,8.8,7.3,17.5c0.9,2.6,1.6,2.9,2.3,2.9s9-10.1,14.1-25.2"
        />
        <path
          className={styles.lvt}
          cus-attr="lvTxt"
          d="M73.7,30.1c0.6,2.2,3.3,6.8,9.4,0.4c6.1-6.4-0.7-10.8-4.7-5.9c-3.3,4-9.3,20.5-1.7,23c6.3,1.1,10-5.5,10-5.5"
        />
        <path
          className={styles.lvt}
          cus-attr="lvTxt"
          d="M103,29.3c0.5,0.8,1.7,1.8,20.6,0"
        />
        <path
          className={styles.lvt}
          cus-attr="lvTxt"
          d="M126.8,13.7c-1-3.5-7.4-8.7-11.4,3.5c-4.1,12.2-5.4,32.3-2.1,43.4"
        />
        <path
          className={styles.lvt}
          cus-attr="lvTxt"
          d="M133.6,27.4c-1-0.4-6.9,3.1-6.3,17c0.4,5.8,12.2,2.2,15.1-8.1c2-10.7-9.4-14-10.1-8.9"
        />
        <path
          className={styles.lvt}
          cus-attr="lvTxt"
          d="M149.6,24.8c0.5,0.7,1.9,13.8,1.5,21.4c0,0-0.8-15.8,14.7-20.7"
        />
        <path
          className={styles.lvt}
          cus-attr="lvTxt"
          d="M169.2,30c0.9,3.9,5.6,6.8,10.6-1.4c3.1-6-4.4-8.9-8.3,0.4s-4,17.2,0.9,18.1c4.8,0.9,8.7-2.2,10-4.9"
        />
        <path
          className={styles.lvt}
          cus-attr="lvTxt"
          d="M185.7,26c1.7,1.7,4.6,6.8,7.4,16.7c1.1,4.1,2.2,4.5,5,0.4s7.1-11,11.5-22.2"
        />
        <path
          className={styles.lvt}
          cus-attr="lvTxt"
          d="M213.6,29.8c0,0,1,7.2,6.9,2.7s5.4-8.8,2.5-9.9c-2.9-1-8.2,4.7-10,17.1c-1.7,12.4,11.1,7.9,13.7,2.5"
        />
        <path
          className={styles.lvt}
          cus-attr="lvTxt"
          d="M233.1,24.8c1,1.6,2.2,14.9,1.5,21.1c0,0,0.7-17,14.9-20.4"
        />
      </g>
    </svg>
  );
};
const Star = ({ color = '#fff' }: { color?: string }) => {
  const width = 20;
  const half = 10; //width/2;
  const quat = 5; //width/4;
  return (
    <svg
      version="1.1"
      viewBox={'0 0 ' + width + ' ' + width + ''}
      height={width}
      width={width}
      style={{
        width: '100%',
        height: '100%',
      }}
    >
      <path
        d={
          'M 0 ' +
          half +
          ' c ' +
          quat +
          ' 0 ' +
          half +
          ' -' +
          quat +
          ' ' +
          half +
          ' -' +
          half +
          ' c 0 ' +
          quat +
          ' ' +
          quat +
          ' ' +
          half +
          ' ' +
          half +
          ' ' +
          half +
          ' c -' +
          quat +
          ' 0 -' +
          half +
          ' ' +
          quat +
          ' -' +
          half +
          ' ' +
          half +
          ' c 0 -' +
          quat +
          ' -' +
          quat +
          ' -' +
          half +
          ' -' +
          half +
          ' -' +
          half +
          ''
        }
        className={styles.star}
      />
    </svg>
  );
};
interface ViewProps extends React.HTMLAttributes<HTMLSpanElement> {}
interface States {
  activeState?: boolean;
  coloredState?: boolean;
}
export default class ButtonDayNight extends React.Component<ViewProps, States> {
  public state: States = {};
  public componentDidMount(): void {
    this.init();
    // this.changeState()
  }
  public render() {
    const { className, children, ...restProps } = this.props;
    const { activeState, coloredState } = this.state;
    return (
      <div
        className={cx(
          styles.button,
          {
            [styles.active]: activeState,
            [styles.colored]: coloredState,
          },
          className,
        )}
        {...restProps}
      >
        <div className={styles.canvasBg}>
          <PointsBg ref={(e) => (this.PointBgRef = e)} />
        </div>
        <div className={styles.btnInner}>
          <Moon />
          <div className={cx(styles.abBox, styles.plants)}>
            <Plants />
          </div>
          <div className={cx(styles.abBox, styles.leaf)}>
            <Leaf />
          </div>
          <div className={cx(styles.abBox, styles.flower1)}>
            <Flower1 />
          </div>
          <div className={cx(styles.abBox, styles.flower2)}>
            <Flower2 />
          </div>
          <div className={cx(styles.abBox, styles.flower3)}>
            <Flower3 />
          </div>
          <div className={cx(styles.abBox, styles.flower4)}>
            <Flower4 />
          </div>
          {new Array(6).fill(1).map((e, ind) => (
            <span
              className={cx(styles.abBox, styles['star' + (ind + 1)])}
              key={ind + 'star'}
            >
              <Star />
            </span>
          ))}
          <div className={cx(styles.abBox, styles.txts)}>
            <div className={styles.name}>
              <span className={styles.txt}>G</span>
              <span className={styles.txt}>&</span>
              <span className={styles.txt}>Z</span>
            </div>
            <div className={styles.time}>
              <span className={styles.txt}>2</span>
              <span className={styles.txt}>0</span>
              <span className={styles.txt}>2</span>
              <span className={styles.txt}>
                <span className={styles.t1}>0</span>
                <span className={styles.t2}>3</span>
              </span>
              <span className={styles.txt}>.</span>
              <span className={styles.txt}>5</span>
              <span className={styles.txt}>.</span>
              <span className={styles.txt}>2</span>
              <span className={styles.txt}>0</span>
            </div>
            <div className={styles.loveTxt}>
              <LoveTxt />
            </div>
          </div>
        </div>
        <div className={styles.startBox} onClick={this.changeState}>
          <ButtonStart />
          <div className={styles.fakeBtn}></div>
        </div>
      </div>
    );
  }
  private PointBgRef: any = null;
  private init = () => {
    this.hideAllPath();
    this.leafHide('[cus-attr="plLf"]');
    this.leafHide('[cus-attr="plLf2"]');
  };
  private changeState = () => {
    const { activeState } = this.state;
    if (activeState) {
      this.hideAllPath();
      this.leafHide('[cus-attr="plLf"]');
      this.leafHide('[cus-attr="plLf2"]');
      this.changeColor(false);
      this.PointBgRef.stopPlay();
    } else {
      const moonTime = 3;
      this.pathsAnimate('#plAn1', { delayBase: moonTime + 0.1 });
      this.pathsAnimate('#plAn2', { duration: 6, delayBase: moonTime });
      this.leafAnimate('[cus-attr="plLf"]', { delayBase: moonTime + 1 });
      this.leafAnimate('[cus-attr="plLf2"]', { delayBase: moonTime });
      this.pathsAnimate('[cus-attr="lvTxt"]', {
        delayBase: moonTime + 5.5,
        duration: 0.2,
        delayStep: 0.3,
      });
      this.changeColor(true);
    }
    this.setState({ activeState: !this.state.activeState });
  };
  private colorTimeout: any = null;
  private changeColor = (state: boolean) => {
    if (state) {
      if (this.colorTimeout) {
        clearTimeout(this.colorTimeout);
      }
      this.colorTimeout = setTimeout(() => {
        this.setState({
          coloredState: true,
        });
        this.PointBgRef.startPlay();
      }, 12000);
    } else {
      this.setState({
        coloredState: false,
      });
    }
  };
  private pathsAnimate = (
    query: string,
    params: {
      duration?: number;
      delayBase?: number;
      delayStep?: number;
    } = {},
  ) => {
    const paths: any = document.querySelectorAll(query);
    paths.forEach((path, i, obj) => {
      if (!path.style.strokeDashoffset) {
        const length = path.getTotalLength();
        path.style.transition = path.style.WebkitTransition = 'none';
        path.style.strokeDasharray = length + ' ' + length;
        path.style.strokeDashoffset = length;
      }
      path.getBoundingClientRect();
      path.style.transition = path.style.WebkitTransition =
        'stroke-dashoffset ' + (params.duration || 4) + 's ease-out';
      path.style.transitionDelay = path.style.WebkitTransitionDelay =
        i * (params.delayStep || 0.6) + (params.delayBase || 0) + 's';
      path.style.strokeDashoffset = '0';
    });
  };
  private hideAllPath = () => {
    const queryList = ['#plAn1', '#plAn2'];
    queryList.map((e) => {
      this.pathsHide(e);
    });
    this.pathsHide('[cus-attr="lvTxt"]');
  };
  private pathsHide = (query: string) => {
    const paths: any = document.querySelectorAll(query);
    paths.forEach((path, i, obj) => {
      const length = path.getTotalLength();
      path.style.transition = path.style.WebkitTransition = 'none';
      path.style.strokeDasharray = length + ' ' + length;
      path.style.strokeDashoffset = length;
    });
  };
  private leafHide = (query: string) => {
    const leaves: any = document.querySelectorAll(query);
    leaves.forEach((item, i, obj) => {
      item.style.transition = item.style.WebkitTransition = 'none';
      item.style.transform = 'scale(0)';
    });
  };
  private leafAnimate = (
    query: string,
    params: {
      duration?: number;
      delayBase?: number;
    } = {},
  ) => {
    const leaves: any = document.querySelectorAll(query);
    leaves.forEach((item, i, obj) => {
      item.style.transition = item.style.WebkitTransition = 'none';
      item.style.transform = 'scale(0)';
      item.getBoundingClientRect();
      item.style.transition = item.style.WebkitTransition =
        'transform ' + (params.duration || 1) + 's ease-out';
      item.style.transitionDelay = item.style.WebkitTransitionDelay =
        i * 0.6 + (params.delayBase || 0) + 's';
      item.style.transform = 'scale(1)';
    });
  };
}
